<template>
  <div :class="[customClass]" class="common-page">
    <CommonNavigateBar v-bind="navigateProps">
      <template #left>
        <slot name="nav-left"></slot>
      </template>

      <template #center>
        <slot name="nav-center">{{ title }}</slot>
      </template>
    </CommonNavigateBar>

    <CommonSkeleton :loading="loading" />
    <div
      :style="{
        '--padding': padding ? `${paddingHorizontal}px` : 0,
      }"
      :class="[!scroll && 'scroll-native']"
      class="common-page__content skeleton"
    >
      <template v-if="scroll">
        <CommonScroll v-bind="scrollProps">
          <slot></slot>
        </CommonScroll>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommonNavigateBar, {
  CommonNavigateBarProps,
} from "@/components/common-navigateBar/index.vue";
// import CommonSkeleton from "@/components/common-skeleton/index.vue";
import CommonScroll, {
  CommonScrollProps,
} from "@/components/common-scroll/index.vue";
import Taro, { useReady } from "@tarojs/taro";
import { ref } from "vue";

defineOptions({
  name: "common-page",
});

export type CommonPageProps = {
  scroll?: boolean;
  customClass?: string;
  scrollProps?: CommonScrollProps;
  navigateProps?: CommonNavigateBarProps;
  padding?: boolean;
  title?: string;
  loading?: boolean;
};

withDefaults(defineProps<CommonPageProps>(), {
  scroll: true,
  scrollProps: () => ({}),
  navigateProps: () => ({}),
  padding: true,
});

const emits = defineEmits(["pull-down", "pull-up"]);

const paddingHorizontal = ref(0);

useReady(() => {
  const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
  const systemInfo: Taro.getSystemInfoSync.Result = Taro.getSystemInfoSync();

  paddingHorizontal.value = systemInfo.windowWidth - menuButtonInfo.right;
});

// const onPulldown = (done: () => void) => {
//   emits("pull-down", done);
// };

// const onPullup = (done: () => void) => {
//   emits("pull-up", done);
// };
</script>

<style lang="less">
.common-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  &__content {
    height: 0;
    box-sizing: border-box;
    flex: 1;
    padding: 0 var(--padding) var(--padding) var(--padding);
    &.scroll-native {
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    // height: 0;
    // background-color: red;
  }
}
</style>
